<!DOCTYPE html>
<!--
/**
 * Copyright (c) 2006, Opera Software ASA
 * All rights reserved.
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 *
 *     * Redistributions of source code must retain the above copyright
 *       notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above copyright
 *       notice, this list of conditions and the following disclaimer in the
 *       documentation and/or other materials provided with the distribution.
 *     * Neither the name of Opera Software ASA nor the
 *       names of its contributors may be used to endorse or promote products
 *       derived from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY OPERA SOFTWARE ASA AND CONTRIBUTORS ``AS IS'' AND ANY
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL OPERA SOFTWARE ASA AND CONTRIBUTORS BE LIABLE FOR ANY
 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */
 -->
<html>
<head>
<title>Acceleration profiles</title>
<style type='text/css'>
div#outer {
  position: relative;   
}
#accelerate {
  position: absolute; 
  left: 0px;
  top: 0px;
  background: red;
  width: 50px;
  height: 50px;
}

#linear {
  position: absolute; 
  left: 0;
  top: 50px;
  background: green;
  width: 50px;
  height: 50px;
}

#sine {
  position: absolute; 
  left: 0;
  top: 100px;
  background: blue;
  width: 50px;
  height: 50px;
}

</style>
<script  type='text/javascript' src='../../animation.js' ></script>
<script type='text/javascript'>
onload=function()
{
  var ele   = document.getElementById('accelerate');
  var ele2 = document.getElementById('linear');  
  var ele3 = document.getElementById('sine');
  
  var trans1 = ele.createAnimation();
  var trans2 = ele2.createAnimation();
  var trans3 = ele3.createAnimation();
  trans1.speed = 1;
  trans2.speed = 1;
  trans3.speed = 1;
  trans2.accelerationProfile = trans2.sine;
  // add a custom acceleration profile
  trans1.accelerationProfile=function(x){
    var sp = 1/25;
    if (x<25){
      return sp+x/25;
    } else {
      return sp+1;;
    }
  };

  document.getElementById('outer').onclick=function(){
    if ((trans1.element.style.left == "") || (trans1.element.style.left=='0px' )){
      trans1.addAnimation('left','0px', (document.getElementById('outer').offsetWidth-50)+'px').run();
      trans2.addAnimation('left','0px', (document.getElementById('outer').offsetWidth-50)+'px').run();
      trans3.addAnimation('left','0px', (document.getElementById('outer').offsetWidth-50)+'px').run();
  } else {
      trans1.addAnimation('left', (document.getElementById('outer').offsetWidth-50)+'px','0px').run();
      trans2.addAnimation('left', (document.getElementById('outer').offsetWidth-50)+'px', '0px').run();
      trans3.addAnimation('left', (document.getElementById('outer').offsetWidth-50)+'px','0px').run();
    }
  }
}
</script>
</head>

<body>
<p>Click on a black square to start a race</p>
<div id="outer">
<div id="accelerate"></div>
<div id="linear"></div>
<div id="sine"></div>
</div>
 <p style="position: absolute; bottom: 1em; left: 1em; border: 1px dotted red; background: infobackground; z-index: -1; padding: .4em;">
  This demo is made with the <a href="../../animation.js">Opera animation library</a>.
 </p>
</body>
</html>
